<template>
  <div class="user-comment">
    <div class="user-comment__header">
      <img
        class="user-comment__avatar"
        src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
        alt="用户头像" />
      <div class="user-comment__info">
        <span class="user-comment__nickname">{{ name }}</span>
        <el-rate
          v-model="comment.score"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}分" />
        <p class="user-comment__text">{{ comment.information }}</p>
      </div>
    </div>
    <div class="user-comment__footer">
      <button class="user-comment__like">
        <span :class="['user-comment__icon', { likeSuccess: like }]" @click="likeSuccess">
          <i class="iconfont icon-dianzan"></i>
        </span>
      </button>
    </div>
    <div class="user-comment__date">{{ year }}-{{ month }}-{{ day }}</div>
    <div class="user-comment__divider"></div>
  </div>
</template>

<script setup>
import { getNameById } from '@/api/personInfo'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const props = defineProps({
  comment: Object
})

const comment = props.comment

// 名字
const name = ref('')

// 日期
const date = new Date(comment.time)
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()

// 点赞判断
const like = ref(false)

const getName = async () => {
  name.value = (await getNameById(comment.userId)).data.data
}

getName()

// 点赞成功
const likeSuccess = () => {
  if (like.value == false) {
    ElMessage.success('点赞成功')
    like.value = true
  } else {
    ElMessage('取消点赞')
    like.value = false
  }
}
</script>

<style scoped>
/* 点赞 */
.likeSuccess {
  color: #ffa500;
}

.user-comment {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 16px;
  margin-bottom: 16px;
}

.user-comment__header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.user-comment__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
}

.user-comment__info {
  display: flex;
  flex-direction: column;
}

.user-comment__nickname {
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.user-comment__text {
  display: block;
  font-size: 14px;
  color: #8e8a8a;
  margin: 10px 0 10px 0;
}

.user-comment__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.user-comment__like {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #999;
}

.user-comment__icon {
  margin-right: 4px;
}

.user-comment__icon--liked {
  color: #ffa500;
}

.user-comment__count {
  font-size: 14px;
}

.user-comment__date {
  font-size: 12px;
  color: #999;
  margin-top: 12px;
  text-align: right;
}

.user-comment__divider {
  margin-top: 16px;
  border-top: 1px solid #ccc; /* 浅灰色实线 */
}
</style>
